<template>
  <div class="search-list">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="商品列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索栏 -->
     <van-search
      show-action
      :value = "querySearch || '搜索商品'"
      background="#fff"
      @search="onSearchKey"
    >
      <template #action>
        <van-icon name="apps-o"/>
      </template>
    </van-search>

    <!-- 商品tab切换 -->
     <van-tabs v-model="activeName" @change="onClick">
      <van-tab title="综合" name="all">
        <goods-list v-for="items in proList" :key="items.goods_id" :item="items" />
      </van-tab>
      <van-tab title="销量" name="sales">
        <goods-list v-for="items in proList" :key="items.goods_id" :item="items" />
      </van-tab>
      <van-tab title="价格" name="price">
        <goods-list v-for="items in proList" :key="items.goods_id" :item="items" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import GoodsList from '@/components/goodsList.vue'
import { getProductList } from '@/api/product'
export default {
  components: {
    GoodsList
  },
  name: 'SearchList',
  data () {
    return {
      activeName: 'all',
      proList: [],
      page: 1
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onSearchKey () {
      console.log('搜索关键字：' + this.value)
    },
    async onClick () {
      if (this.activeName === 'all') {
        const { data: { list } } = await getProductList({
          categoryId: this.$route.query.categoryId,
          goodsName: this.querySearch,
          page: this.page,
          sortType: this.activeName
        })
        this.proList = list.data
      } else if (this.activeName === 'sales') {
        const { data: { list } } = await getProductList({
          categoryId: this.$route.query.categoryId,
          goodsName: this.querySearch,
          page: this.page,
          sortType: this.activeName
        })
        this.proList = list.data
      } else if (this.activeName === 'price') {
        const { data: { list } } = await getProductList({
          categoryId: this.$route.query.categoryId,
          goodsName: this.querySearch,
          page: this.page,
          sortType: this.activeName
        })
        this.proList = list.data
      }
    }
  },
  computed: {
    // 获取搜索关键字
    querySearch () {
      return this.$route.query.search
    }
  },
  async created () {
    // 获取搜索后的商品列表
    const { data: { list } } = await getProductList({
      categoryId: this.$route.query.categoryId,
      goodsName: this.querySearch,
      page: this.page
    })
    this.proList = list.data
  }
}
</script>

<style lang="less" scoped>
  .search-list {
    ::v-deep{
      // 头部nav样式, 字体加粗
      .van-nav-bar{
        .van-nav-bar__title{
          font-weight: 500;
        }
      }
      // 搜索框样式
      .van-search{
        background-color: #fff;
        gap: 0; // 去掉默认的间隔
        .van-search__content{
          background-color: #fff;
          border-radius: 10px 0 0 10px;
        }
        .van-search__action{
          padding: 4px 8px;
          display: flex;
          align-items: center;
          background-color:#fff ;
          }
          &::focus{
            background-color:#fff ;
          }
           .van-icon{
            font-size: 20px;
          }
        }
      }
      .van-search--show-action {
        padding-right: 12px;
      }
  }
</style>
